import React, { useEffect, useState } from 'react'
import { Drawer, Tree,Button, message } from "antd"
import {authApi} from "../apis/roleApi"

const treeData = [
    {title:"首页",key:"/home/"},
    {title:"用户管理",key:"/home/user"},
    {title:"角色管理",key:"/home/role"},
    {title:"店铺管理",key:"/home/shop"},
    {title:"商品管理",key:"/home/product",children:[
        {title:"商品列表",key:"/home/list",children:[
            {title:"商品添加",key:"/home/productadd"},
            {title:"商品修改",key:"/home/productupdate"}
        ]},
        {title:"商品分类",key:"/home/category"}
    ]},
    {title:"财务管理",key:"/home/chart",children:[
        {title:"工资数据",key:"/home/salary"},
        {title:"销售数据",key:"/home/sale"},
    ]}
];
export default function Auth({ open, closeOpen,role }) {
    const [menus,setMenus] = useState([])
    
    const onClose = () => {
        closeOpen()
    };
    const onCheck = (checkedKeys, info) => {
        console.log(checkedKeys);
        setMenus(checkedKeys)
    };
    const auth = async ()=>{
        const temp = menus.length?menus:role.menus
        const data = {
            id:role._id,
            authTime:new Date().toDateString(),
            authUser:"xiaofeifei",
            menus:temp
        }
        console.log(data);
        const res = await authApi(data)
        console.log(res);
        if(res.data.code){
            message.success("授权成功")
        }else{
            message.error("授权失败")
        }
    }
    return (
        <div>
            <Drawer destroyOnClose={true} title="Basic Drawer" placement="right" onClose={onClose} open={open}>
                <Tree
                    checkable
                    defaultExpandedKeys={['/home/product',"/home/chart"]}
                    //role.menus = ["/home/","/home/user"...]
                    defaultCheckedKeys={role.menus}
                    onCheck={onCheck}
                    treeData={treeData}
                    
                />
                <Button onClick={auth}>授权</Button>
            </Drawer>
        </div>
    )
}
